<template>
  <div class="screen-container">
    <div class="header">
      <div class="title">渔业资源可视化监控平台</div>
      <div class="time">{{ currentTime }}</div>
    </div>

    <div class="main-content">
      <!-- 左侧面板 -->
      <div class="left-panel">
        <div class="panel-item">
          <div class="panel-title">渔业资源分布</div>
          <div class="chart-wrapper">
            <div ref="pieChart" style="width: 100%; height: 200px;"></div>
          </div>
        </div>

        <div class="panel-item" style="flex: 1;">
          <div class="panel-title">渔业产量分析</div>
          <div class="chart-wrapper">
            <div ref="barChart" style="width: 100%; height: 100%;"></div>
          </div>
        </div>
      </div>

      <!-- 中间地图 -->
      <div class="center-panel">
        <div class="total-data">
          <div class="data-item">
            <div class="data-title">总渔船数量</div>
            <div class="number">{{ 23689 }}</div>
          </div>
          <div class="data-item">
            <div class="data-title">今日捕捞量(吨)</div>
            <div class="number">{{ 12456 }}</div>
          </div>
          <div class="data-item">
            <div class="data-title">渔场覆盖面积(km²)</div>
            <div class="number">{{ 45678 }}</div>
          </div>
        </div>
        <div ref="mapChart" class="map-container"></div>
      </div>

      <!-- 右侧面板 -->
      <div class="right-panel">
        <div class="panel-item monitor-panel">
          <div class="panel-title">实时监控数据</div>
          <div class="monitor-data">
            <div class="monitor-item">
              <span>水温:</span>
              <span class="value">26.5°C</span>
            </div>
            <div class="monitor-item">
              <span>盐度:</span>
              <span class="value">3.4%</span>
            </div>
            <div class="monitor-item">
              <span>溶解氧:</span>
              <span class="value">6.8mg/L</span>
            </div>
          </div>
        </div>

        <div class="panel-item weather-panel">
          <div class="panel-title">近期海域天气</div>
          <div class="chart-wrapper">
            <div ref="weatherChart" style="width: 100%; height: 100%;"></div>
          </div>
        </div>

        <div class="panel-item trend-panel">
          <div class="panel-title">捕捞量月度趋势分析</div>
          <div class="chart-wrapper">
            <div ref="lineChart" style="width: 100%; height: 100%;"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, nextTick } from 'vue';
import * as echarts from 'echarts';
import initMapChart from '@/config/echarts_map_config.js';

const currentTime = ref('');
const pieChart = ref(null);
const barChart = ref(null);
const mapChart = ref(null);
const lineChart = ref(null);
const weatherChart = ref(null);

// 更新时间
const updateTime = () => {
  currentTime.value = new Date().toLocaleString();
};

// 修改饼图配置
const initPieChart = () => {
  const chart = echarts.init(pieChart.value);
  chart.setOption({
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      right: '2%',  // 更靠右
      top: 'middle',
      textStyle: {
        color: '#fff',
        fontSize: 14  // 增大字体
      },
      itemWidth: 15,  // 增大图例标记
      itemHeight: 15,
      itemGap: 16,  // 增大间距
      formatter: name => {
        const data = chart.getOption().series[0].data;
        const target = data.find(item => item.name === name);
        return `${name}  ${target.value}`;  // 在图例中显示数值
      }
    },
    series: [
      {
        type: 'pie',
        radius: ['40%', '70%'],
        center: ['25%', '50%'],  // 将图表更靠左
        startAngle: 180,
        data: [
          { 
            value: 1048, 
            name: '近海渔业',
            itemStyle: { color: '#4992ff' }
          },
          { 
            value: 735, 
            name: '远洋渔业',
            itemStyle: { color: '#7cffb2' }
          },
          { 
            value: 580, 
            name: '养殖渔业',
            itemStyle: { color: '#fddd60' }
          },
          { 
            value: 484, 
            name: '休闲渔业',
            itemStyle: { color: '#ff8a70' }
          }
        ],
        label: {
          show: false
        },
        emphasis: {
          label: {
            show: false
          },
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  });
};

// 初始化柱状图
const initBarChart = () => {
  const chart = echarts.init(barChart.value);
  chart.setOption({
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      top: '15%',      // 增加顶部间距
      bottom: '15%',
      left: '15%',     // 增加左侧间距
      right: '5%'
    },
    xAxis: {
      type: 'category',
      data: ['东海区', '南海区', '黄海区', '渤海区', '北部湾区', '闽南区', '琼州海峡'],
      axisLabel: {
        color: '#fff',
        interval: 0,
        rotate: 30    // 斜着显示文字，防止重叠
      }
    },
    yAxis: {
      type: 'value',
      name: '渔业产量（吨）',
      min: 0,
      max: 50000,    // 增加最大值
      interval: 5000, // 设置间隔
      nameTextStyle: {
        color: '#fff',
        padding: [0, 0, 0, 40]  // 调整单位位置
      },
      axisLabel: {
        color: '#fff',
        formatter: '{value}'
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: 'rgba(255,255,255,0.1)',
          type: 'dashed'
        }
      }
    },
    series: [
      {
        name: '2023年产量',
        data: [42000, 45000, 38000, 35000, 28000, 32000, 25000],
        type: 'bar',
        barWidth: '40%',
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#83bff6' },
            { offset: 0.5, color: '#188df0' },
            { offset: 1, color: '#188df0' }
          ])
        },
        emphasis: {
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#188df0' },
              { offset: 0.7, color: '#83bff6' },
              { offset: 1, color: '#83bff6' }
            ])
          }
        },
        label: {
          show: true,
          position: 'top',
          color: '#fff',
          formatter: '{c}吨'
        }
      }
    ]
  });

  // 添加自适应
  window.addEventListener('resize', () => {
    chart.resize();
  });
};

// 修改地图配置
// const initMapChart = () => {
//   const chart = echarts.init(mapChart.value);
  
//   const data = [
//     { name: '舟山渔场', value: [122.3, 29.5], production: 5680 },
//     { name: '吕泗渔场', value: [121.5, 32.0], production: 4320 },
//     { name: '嵊山渔场', value: [122.8, 30.7], production: 3890 },
//     { name: '渤海湾渔场', value: [119.0, 38.5], production: 6570 },
//     { name: '南海渔场', value: [113.5, 21.5], production: 7240 },
//     { name: '北部湾渔场', value: [108.2, 21.5], production: 5120 },
//     { name: '长江口渔场', value: [121.9, 31.2], production: 4670 },
//     { name: '闽东渔场', value: [120.3, 26.8], production: 3980 },
//     { name: '台湾浅滩渔场', value: [118.5, 23.5], production: 6210 },
//     { name: '南沙渔场', value: [114.2, 10.5], production: 8350 }
//   ];

//   chart.setOption({
//     backgroundColor: 'transparent',
//     tooltip: {
//       trigger: 'item',
//       formatter: function(params) {
//         return `${params.name}<br/>产量: ${params.data.production}吨`;
//       }
//     },
//     geo: {
//       map: 'china',
//       roam: true,
//       zoom: 0.3,
//       center: [119.22, 24.57],
//       rotate: 0.2, // 添加 rotate 属性，设置旋转角度为 30 度
//       label: {
//         show: false
//       },
//       emphasis: {
//         label: {
//           show: false
//         }
//       },
//       itemStyle: {
//         areaColor: 'rgba(64, 169, 255, 0.1)',
//         borderColor: 'rgba(64, 169, 255, 0.3)',
//         borderWidth: 1
//       },
//       emphasis: {
//         itemStyle: {
//           areaColor: 'rgba(64, 169, 255, 0.2)'
//         }
//       }
//     },
//     series: [
//       {
//         type: 'effectScatter',
//         coordinateSystem: 'geo',
//         data: data,
//         symbolSize: 15,
//         showEffectOn: 'render',
//         rippleEffect: {
//           brushType: 'stroke',
//           scale: 3
//         },
//         hoverAnimation: true,
//         label: {
//           show: true,
//           position: 'right',
//           formatter: '{b}',
//           color: '#fff',
//           fontSize: 12,  // 调小字体
//           padding: [2, 5] // 增加标签内边距
//         },
//         itemStyle: {
//           color: '#40a9ff',
//           shadowBlur: 10,
//           shadowColor: '#40a9ff'
//         },
//         emphasis: {
//           scale: true
//         },
//         zlevel: 1
//       },
//       {
//         type: 'lines',
//         coordinateSystem: 'geo',
//         data: data.map((item, index) => ({
//           coords: [
//             item.value,
//             data[(index + 1) % data.length].value
//           ]
//         })),
//         lineStyle: {
//           color: '#40a9ff',
//           width: 1,
//           opacity: 0.6,
//           curveness: 0.2
//         },
//         effect: {
//           show: true,
//           symbol: 'arrow',
//           symbolSize: 5,
//           trailLength: 0.1
//         },
//         zlevel: 2
//       }
//     ]
//   });

//   // 添加自适应
//   window.addEventListener('resize', () => {
//     chart.resize();
//   });
// };

// 初始化天气图表
const initWeatherChart = () => {
  const chart = echarts.init(weatherChart.value);
  chart.setOption({
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['气温', '风力'],
      textStyle: { color: '#fff' },
      top: '5%'
    },
    grid: {
      top: '25%',
      bottom: '15%',
      left: '10%',
      right: '10%'
    },
    xAxis: {
      type: 'category',
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
      axisLabel: { color: '#fff' }
    },
    yAxis: [
      {
        type: 'value',
        name: '气温（°C）',
        nameTextStyle: { color: '#fff' },
        axisLabel: { color: '#fff' },
        splitLine: {
          show: true,
          lineStyle: { color: 'rgba(255,255,255,0.1)' }
        }
      },
      {
        type: 'value',
        name: '风力（级）',
        nameTextStyle: { color: '#fff' },
        axisLabel: { color: '#fff' },
        splitLine: { show: false }
      }
    ],
    series: [
      {
        name: '气温',
        type: 'line',
        data: [22, 23, 21, 24, 23, 22, 21],
        smooth: true,
        itemStyle: { color: '#ff9f7f' }
      },
      {
        name: '风力',
        type: 'bar',
        yAxisIndex: 1,
        data: [4, 5, 3, 4, 6, 5, 4],
        itemStyle: { color: '#37a2da' }
      }
    ]
  });
};

// 修改趋势图
const initLineChart = () => {
  const chart = echarts.init(lineChart.value);
  chart.setOption({
    title: {
      textStyle: {
        color: '#fff',
        fontSize: 16
      }
    },
    tooltip: {
      trigger: 'axis',
      formatter: '{b}<br/>{a}: {c} 吨'
    },
    grid: {
      top: '20%',
      bottom: '15%',
      left: '17%',     // 增加左侧间距，防止纵坐标值被遮挡
      right: '5%'
    },
    xAxis: {
      type: 'category',
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
      axisLabel: {
        color: '#fff'
      }
    },
    yAxis: {
      type: 'value',
      name: '捕捞量（吨）',
      nameTextStyle: {
        color: '#fff',
        padding: [0, 0, 0, 50]  // 增加名称的左侧padding
      },
      axisLabel: {
        color: '#fff',
        formatter: '{value} 吨',
        margin: 16    // 增加标签与轴线的距离
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: 'rgba(255,255,255,0.1)',
          type: 'dashed'
        }
      }
    },
    series: [
      {
        name: '月度捕捞量',
        type: 'line',
        data: [1200, 1320, 1010, 1340, 900, 1330, 1320, 1250, 1100, 980, 950, 1100],
        smooth: true,
        symbol: 'circle',
        symbolSize: 8,
        lineStyle: {
          width: 3,
          color: '#40a9ff'
        },
        itemStyle: {
          color: '#40a9ff',
          borderWidth: 2,
          borderColor: '#fff'
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(64,169,255,0.3)' },
            { offset: 1, color: 'rgba(64,169,255,0.1)' }
          ])
        },
        emphasis: {
          itemStyle: {
            color: '#fff',
            borderColor: '#40a9ff',
            borderWidth: 3,
            shadowColor: 'rgba(64,169,255,0.5)',
            shadowBlur: 10
          }
        }
      }
    ]
  });

  // 添加自适应
  window.addEventListener('resize', () => {
    chart.resize();
  });
};

// 改用这种方式获取地图数据
const initMap = async () => {
  try {
    const { geoJSON } = await fetch(
      'https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json'
    ).then(res => res.json());
    
    echarts.registerMap('china', { geoJSON });
  } catch (error) {
    console.error('加载地图数据失败:', error);
  }
};

// 修改生命周期钩子
onMounted(() => {
  updateTime();
  const timer = setInterval(updateTime, 1000);

  // 使用nextTick确保DOM已经渲染
  nextTick(async () => {
    try {
      // 先初始化地图数据
      await initMap();
      
      // 然后初始化所有图表
      initPieChart();
      initBarChart();
      initMapChart(mapChart.value);
      initWeatherChart();
      initLineChart();

      // 添加窗口resize事件监听
      const handleResize = () => {
        [pieChart, barChart, mapChart, weatherChart, lineChart].forEach(chart => {
          if (chart.value) {
            echarts.getInstanceByDom(chart.value)?.resize();
          }
        });
      };

      window.addEventListener('resize', handleResize);

      // 在组件卸载时清理
      onUnmounted(() => {
        clearInterval(timer);
        window.removeEventListener('resize', handleResize);
        [pieChart, barChart, mapChart, weatherChart, lineChart].forEach(chart => {
          if (chart.value) {
            echarts.getInstanceByDom(chart.value)?.dispose();
          }
        });
      });
    } catch (error) {
      console.error('图表初始化失败:', error);
    }
  });
});
</script>

<style scoped>
.screen-container {
  width: 100%;
  height: 100vh;
  background: linear-gradient(to right, #040B1D, #1B3160);  /* 更改为深蓝色渐变 */
  color: #fff;
  padding: 10px;
  box-sizing: border-box;
  overflow: hidden;
}

.header {
  height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
}

.title {
  font-size: 24px;
  font-weight: bold;
}

.main-content {
  display: flex;
  gap: 20px;
  margin-top: 20px;
  height: calc(100% - 80px);
}

.left-panel,
.right-panel {
  width: 25%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.center-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.panel-item {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border-radius: 10px;
  padding: 15px;
  height: calc(33.33% - 14px);
  border: 1px solid rgba(64, 169, 255, 0.2);
  transition: all 0.3s ease;
  position: relative;
  overflow: visible;
}

/* 移除旋转动画，改为发光效果 */
.panel-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 10px;
  background: transparent;
  border: 1px solid rgba(64, 169, 255, 0.3);
  box-shadow: 0 0 20px rgba(64, 169, 255, 0.2);
  z-index: -1;
}

/* 添加数字翻转动画 */
.number {
  font-size: 24px;
  color: #40a9ff;
  animation: numberScale 1s ease-in-out;
}

@keyframes numberScale {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* 添加悬停效果 */
.panel-item:hover {
  transform: translateY(-5px);
  transition: transform 0.3s ease;
  box-shadow: 0 5px 15px rgba(64, 169, 255, 0.2);
}

.panel-title {
  font-size: 18px;
  margin-bottom: 15px;
  color: #40a9ff;
}

.total-data {
  display: flex;
  justify-content: space-around;
  margin-bottom: 20px;
}

.data-item {
  text-align: center;
}

.data-title {
  font-size: 14px;
  color: #8c8c8c;
  margin-bottom: 5px;
}

.map-container {
  flex: 1;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 15px;
  border: 1px solid rgba(64, 169, 255, 0.3);
  position: relative;
  overflow: hidden;
}

.monitor-data {
  display: flex;
  flex-direction: column;
  gap: 10px;  /* 减小间距 */
}

.monitor-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;  /* 调整内边距 */
  background: rgba(255, 255, 255, 0.05);
  border-radius: 5px;
  margin-bottom: 5px;  /* 减小底部间距 */
}

.monitor-item:hover {
  background: rgba(64, 169, 255, 0.1);
  transform: scale(1.02);
}

.value {
  color: #40a9ff;
  font-weight: bold;
}

.chart-wrapper {
  height: calc(100% - 40px);  /* 减去标题的高度 */
  position: relative;
}

.monitor-panel {
  flex: 0.8 !important;  /* 监控面板稍微矮一点 */
}

.weather-panel, .trend-panel {
  flex: 1.1;  /* 图表面板稍微高一点 */
}

/* 优化图例样式 */
:deep(.echarts-tooltip) {
  background: rgba(0, 0, 0, 0.7) !important;
  border: 1px solid rgba(64, 169, 255, 0.2) !important;
  border-radius: 4px;
}

.left-panel .panel-item:first-child {
  height: 300px;  /* 固定饼图高度 */
}

.left-panel .panel-item:last-child {
  flex: 1;  /* 柱状图占满剩余空间 */
  height: auto;  /* 覆盖原来的高度设置 */
}

.right-panel {
  width: 25%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.panel-item {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  padding: 15px;
  position: relative;
}

.weather-panel, .trend-panel {
  height: 300px;  /* 给图表一个固定高度 */
}

.chart-wrapper {
  width: 100%;
  height: calc(100% - 30px);  /* 减去标题高度 */
}
</style> 